<template>
    <div class="p-15 p-t-0 box-shadow-1">
        <div style="width:500px;margin:0 auto" class="">

            <el-form :model="ruleForm2" status-icon ref="ruleForm2" label-width="100px" class="demo-ruleForm">
                <div style="padding-top:20px; "></div>
                <el-form-item label="原密码" prop="oldpass" :rules="[{ required: true, message: '请输入原密码', trigger: 'blur' }]">
                    <el-input type="password" v-model="ruleForm2.oldpass" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newpass" :rules="[{ required: true, message: '请输入新密码', trigger: 'blur' },{ validator: validatePass, trigger: 'blur' }]">
                    <el-input type="password" v-model="ruleForm2.newpass" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmpass" :rules="[{ required: true, message: '请再次输入密码', trigger: 'blur' },{ validator: validatePass2, trigger: 'blur' }]">
                    <el-input type="password" v-model="ruleForm2.confirmpass" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item class="text-center">
                    <el-button type="primary"  @click="submitForm('ruleForm2')">提交</el-button>
                    <el-button @click="goBack()">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>

    export default {
        data() {
                return {
                    ruleForm2: {
                        confirmpass: '',
                        newpass: '',
                        oldpass: ''
                    },
                    // rules2: {
                    //     pass: [
                    //         {validator: validatePass, trigger: 'blur'}
                    //     ],
                    //     checkPass: [
                    //         {validator: validatePass2, trigger: 'blur'}
                    //     ]
                    // }

            }
        },
        created() {
            window.this = this;

        },
        methods: {
            goBack() {
                this.router.go(-1);
            },
            validatePass (rule, value, callback) {
                /*if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.modelForm.password !== '') {
                        this.$refs.modelForm.validateField('password');

                    }
                }*/
                callback();

            },
            validatePass2 (rule, value, callback)  {
                //console.log(value);
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm2.newpass ) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                      this.$axios.post("organization/merchantGroups/changePassword",this.ruleForm2).then((data)=>{
                            if(data.status==200){
                                this.$message({
                                    message:data.message,
                                    type: 'success'
                                });
                                this.$refs[formName].resetFields();
                                this.$emit('addSuccess');
                            }else{
                              this.$message({
                                message:data.message,
                                type: 'error'
                              });

                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        },

    }
</script>
<style scoped>
</style>
